<!-- 账号密码登录 accountLogin  -->
<template>
  <view>
    <!-- 标题栏 -->
    <view class="head-box ss-m-b-60 ss-flex-col">
      <view class="ss-flex ss-m-b-20">
        <view class="head-title head-title-line ss-m-r-20 head-title-animation">微信登录</view>
        <view class="head-title-active head-title-line ss-m-r-10" @tap="showAuthModal('smsLogin')">
          短信登录
        </view>
        <view class="head-title-active head-title-line" @tap="showAuthModal('accountLogin')">
          账号登录
        </view>
      </view>
    </view>

    <!-- 表单项 -->
    <view class="auto-login-box ss-flex ss-flex-col ss-row-center ss-col-center">
      <!-- 7.1 微信小程序的快捷登录 -->

      <!-- 7.2 微信的公众号、App、小程序的登录，基于 openid + code -->
      <button
        v-if="
          ['WechatOfficialAccount', 'WechatMiniProgram', 'App'].includes(sheep.$platform.name) &&
          sheep.$platform.isWechatInstalled
        "
        @tap="thirdLogin('wechat')"
        class="ss-reset-button auto-login-btn"
      >
        <image class="auto-login-img" :src="sheep.$url.static('wechat.png')" />
      </button>

      <view
        v-if="sheep.$platform.name === 'WechatMiniProgram'"
        class="ss-flex register-box"
        style="margin-bottom: -10px"
      >
        <view class="register-title">点击图标登录</view>
        <view class="circle" />
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, reactive, unref } from 'vue';
  import sheep from '@/sheep';
  import { mobile, password } from '@/sheep/validate/form';
  import { showAuthModal, closeAuthModal } from '@/sheep/hooks/useModal';
  import AuthUtil from '@/sheep/api/member/auth';
  import { bindBrokerUser } from '@/sheep/hooks/useBind';

  const accountLoginRef = ref(null);

  const emits = defineEmits(['onConfirm']);

  const props = defineProps({
    agreeStatus: {
      type: Boolean,
      default: false,
    },
  });

  // 数据
  const state = reactive({
    model: {
      mobile: '', // 账号
      password: '', // 密码
    },
    rules: {
      mobile,
      password,
    },
  });

  // 账号登录
  async function accountLoginSubmit() {
    // 表单验证
    const validate = await unref(accountLoginRef)
      .validate()
      .catch((error) => {
        console.log('error: ', error);
      });
    if (!validate) return;

    // 同意协议
    if (!props.agreeStatus) {
      emits('onConfirm', true);
      sheep.$helper.toast('请勾选同意');
      return;
    }

    // 提交数据
    const { code, data } = await AuthUtil.login(state.model);
    if (code === 0) {
      await bindBrokerUser(undefined, { showError: false });
      closeAuthModal();
    }
  }

  const thirdLogin = async (provider) => {
    // 同意协议
    if (!props.agreeStatus) {
      emits('onConfirm', true);
      sheep.$helper.toast('请勾选同意');
      return;
    }
    const loginRes = await sheep.$platform.useProvider(provider).login();
    if (loginRes) {
      await bindBrokerUser(undefined, { showError: false });
      closeAuthModal();
      // 触发小程序授权信息弹框
      // #ifdef MP-WEIXIN
      showAuthModal('mpAuthorization');
      // #endif
    }
  };

  // 微信小程序的“手机号快速验证”：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
  const getPhoneNumber = async (e) => {
    if (e.detail.errMsg !== 'getPhoneNumber:ok') {
      sheep.$helper.toast('快捷登录失败');
      return;
    }
    let result = await sheep.$platform.useProvider().mobileLogin(e.detail);
    if (result) {
      await bindBrokerUser(undefined, { showError: false });
      closeAuthModal();
    }
  };
</script>

<style lang="scss" scoped>
  @import '../index.scss';
  .login-btn {
    color: var(--ui-BG-Main);
    font-size: 30rpx;
    font-weight: 500;
    margin-left: 6rpx;
  }
</style>
